<script >
import axios from 'axios'

export default {
  name: "Detail",
  data(){
    return {
       info:{},
       isLoading:true
    }
  },
  beforeRouteLeave(to, from, next){
       this.getFilmInfo(to.params.id);
       next();
  },
  methods:{
    async getFilmInfo(filmId=this.$route.params.id){
       this.isLoading = true;
       const {data} = await axios.get("https://m.maizuo.com/gateway",{
         params:{
           filmId
         },
         headers:{
           "X-Client-Info":'{"a":"3000","ch","1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}'
           "X-Host": "mall.film-ticket.film.info"
         }
       });
       this.isLoading = false;
       this.info = data.data.film;
    }
  },
       mounted(){
            this.getFilmInfo();
       }
}
</script>

<template>
  <div>
    <h3 v-if="isLoading">正在加载中.....</h3>
    <template v-else>
         <h3>{{info.name}}</h3>
          <p>{{info.synopsis}}</p>
    </template>
  </div>

</template>

<style scoped>

</style>